<!--
 * @Author: 秦福凯
 * @Date: 2024-08-23 10:12:59
 * @Description: 
 * @FilePath: \sx-school-oa\src\components\common\pagenation\PageNation.vue
-->
<template>
  <div class="u-common-pagination">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10,20, 30, 40, 50]"
      :disabled="disabled"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="props.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
  </div>

</template>

<script setup>
import { ref, reactive, defineProps, defineEmits} from 'vue'

const emit = defineEmits();

const currentPage = ref(1)
const pageSize = ref(10)
const disabled = ref(false)

let props = defineProps({
  parmas:Object,
  total:{
    type:Number,
    default:0
  },
  page: {
    type: Number,
    default: 1
  },
})

let currentLimit = ref(10)
function handleSizeChange(val){
  console.log(val)
  if (currentPage.value * val > props.total) {
    currentPage.value = 1
  }
  emit('pagination', { page: currentPage.value, limit: val })
  currentLimit.value = val
}

const handleCurrentChange = val => {
  emit('pagination', { page: val, limit:currentLimit.value })
}
</script>
<style lang='scss' scoped>
.u-common-pagination{
  margin-top: 8px;
}
</style>